<template>
  <div>
    <d-button @click="openDialog">打开Drawer</d-button>
  </div>

  <d-drawer
    v-model="dialogVisible"
    :show-close="false"
    header-class="headerClass"
    footer-class="headerClass"
    :before-close="beforeClose">
    <template #header="{ close }">
      <div class="my-header">
        <div>
          <div>我是自定义的标题</div>
          <div class="sub-title">我是副标题</div>
        </div>
        <d-button @click="close">关闭</d-button>
      </div>
    </template>
    <div style="height: 2200px">This is dialog content.</div>
    <template #footer>
      <div><d-button @click="dialogVisible = false">关闭</d-button></div>
    </template>
  </d-drawer>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import DDrawer from '../../../packages/drawer/index.vue'

  const dialogVisible = ref(false)
  const openDialog = () => {
    dialogVisible.value = true
  }
  const beforeClose = done => {
    console.log('我是关闭前操作')
    done()
  }
</script>

<style scoped>
  .my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
  }
  ::v-deep(.headerClass) {
    color: #999;
    background-color: rgba(255, 0, 0, 0.1);
  }
</style>
